<script setup>
import { ref, watch, nextTick, getCurrentInstance } from 'vue';




const props = defineProps({
  imageFileUrl: String,
  scale: {
    type: Number,
  }
})


const instance = getCurrentInstance()


// 缩放比例
const scaleRatio = ref(1)
// 原图尺寸信息
const oldImgRect = ref({})
// 图片尺寸信息
const imgRect = ref({})

// 父盒子尺寸信息
const contentDom = ref({})

// 百分比信息
const percent = ref({
  topScale: 0,
  bottomScale: 0,
  leftScale: 0,
  rightScale: 0,
})


watch(() => props.imageFileUrl, (val) => {
  getDom().then(() => {
    calculatePicAspectRatio(val)
  })
}, { immediate: true, deep: true })


/**
 * 根据 queryParams 的像素值计算图片距离矩形的百分比尺寸信息
 * 需要将缩放后的位置信息还原为缩放前的位置信息
 */
function calculatePercentages() {
  percent.value.topScale = props.scale;
  percent.value.bottomScale = props.scale;
  percent.value.leftScale = props.scale;
  percent.value.rightScale = props.scale;
}



// 监听 queryParams 的变化，自动更新百分比信息
watch(() => props.scale, () => {
  calculatePercentages();
}, { immediate: true, deep: true });



// 计算图片宽高比及外部边框盒子的宽高
async function calculatePicAspectRatio(path) {
  const { width, height } = await uni.getImageInfo({ src: path })

  const widthRatio = contentDom.value.width / width;
  const heightRatio = contentDom.value.height / height;
  scaleRatio.value = Math.min(widthRatio, heightRatio);

  // 计算缩放后的图片宽度和高度
  const scaledWidth = width * scaleRatio.value;
  const scaledHeight = height * scaleRatio.value;


  // 原图尺寸
  oldImgRect.value = {
    width,
    height,
  }

  // 绘制尺寸
  imgRect.value = {
    width: scaledWidth,
    height: scaledHeight,
  }
}



function getDom() {
  return new Promise((resolve) => {
    nextTick(() => {
      uni.createSelectorQuery().in(instance).select('.equalProportion').boundingClientRect((rect) => {
        contentDom.value = rect
        resolve(rect)
      }).exec()
    })
  })
}

defineExpose({
  percent,
})

</script>

<template>
  <div class="equalProportion">
    <div class="show-expansion-box">
      <div class="imgBox" :style="{ width: imgRect.width + 'px', height: imgRect.height + 'px' }">
        <img :src="imageFileUrl" :style="{ transform: `scale(${1 / scale})` }" class="imgSty" mode="aspectFit">
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.equalProportion {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.show-expansion-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  max-width: 100%;
  max-height: 100%;

  .imgBox {
    box-sizing: border-box;
    border: 6rpx dashed #808080;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    background: url(http://devai.20ai30.com/upload/2024/06/23/file_20240623151030A016.png);
    background-size: 25rpx 25rpx;


    .imgSty {
      display: block;
      width: 100%;
      height: 100%;
    }


  }
}
</style>